<script setup lang="ts">
import { useAudioPlayerStore} from "@/stores"
import LikeButton from "@/components/Controls/LikeButton.vue"
import DownloadButton from "@/components/Controls/DownloadButton.vue"
import FooterMusicControls from "@/components/Screen/FooterMusicControls.vue";
import FooterMusicQueue from "@/components/Screen/FooterMusicQueue.vue";
import FooterMusicTime from "@/components/Screen/FooterMusicTime.vue";
import FooterMusicCoverB from '@/components/Screen/FooterMusicCoverB.vue'
const audioPlayer = useAudioPlayerStore()

</script>

<template>
  <div class="player-footer">

    <div class="music-button">
      <FooterMusicCoverB></FooterMusicCoverB>
      <LikeButton
          :liked="audioPlayer.playingSong ? audioPlayer.playingSong.liked : false"
          :songId="audioPlayer.playingSong ? audioPlayer.playingSong.id : '0'"
          :themeDarkStyle="true"
      >
      </LikeButton>
      <DownloadButton
          :song-id="audioPlayer.playingSong ? audioPlayer.playingSong.id : '0'"
          :themeDarkStyle="true"
      ></DownloadButton>
      <FooterMusicTime class="time"></FooterMusicTime>
    </div>
    <div class="music-control">
      <FooterMusicControls :themeDarkStyle="true"></FooterMusicControls>
    </div>
    <div class="music-queue">
      <FooterMusicQueue :themeDarkStyle="true"></FooterMusicQueue>
    </div>
  </div>
</template>

<style scoped lang="scss">
.player-footer{
  height: 70px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  z-index: 2000;
  .music-button{
    height: 70px;
    color: white;
    display: flex;
    align-items: center;

    div{
      margin-right: 20px;
    }

  }

  .music-control{
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
  }

  .music-queue{
    color: white;
  }
}
</style>